﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="fancibox.aspx.vb" Inherits="ProjetoDeTestes.fancibox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a.grouped_elements").fancybox({
                'overlayShow': true,
                'overlayOpacity': 0,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titleShow': true,
                'titlePosition': 'over',
                'hideOnOverlayClick': true
            });
            $("#ifr").fancybox({
                'width': '75%',
                'height': '75%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe'
            });
        });
    </script>
    <link href="http://localhost:30876/jQueryFancybox/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <a class="grouped_elements" rel="group1" href="1.jpg" title="cachorro bonito"><img src="1.jpg" width="100px"  /></a>
        <a class="grouped_elements" rel="group1" href="DogControlPhoto.JPG" title="cachorro arteiro"><img src="DogControlPhoto.JPG" width="100px"  /></a>

        <a class="grouped_elements" rel="group2" href="2_dogs_running.jpg" title="cachorro safado"><img src="2_dogs_running.jpg" width="100px"  /></a>
        <a class="grouped_elements" rel="group2" href="BraxtonPuggle.jpg" title="cachorro barulhento"><img src="BraxtonPuggle.jpg" width="100px" /></a>

        <br />
        <br />

        <a id="ifr" href="http://www.globo.com/" target="_blank">This goes to iframe</a>
    </div>
    </form>
</body>
</html>



